<template>
	<view>
		<view class="overall">
			<span class="left_1">手机震动</span>
			<div class="right">
				<span class="weui-switch" :class="{'weui-switch-on' : isChecked1}" :value="value" @click="toggle1">
					<div v-if="isChecked1 && direction.length > 0">
						{{direction[0]}}
					</div>
					<div v-if="!isChecked1 && direction.length > 0">
						{{direction[1]}}
					</div>
				</span>
			</div>
		</view>
		<view class="overall">
			<span class="left_2">震动时长</span>
			<div class="right">
				<select style="border: 0px; font-size: 18px; color: #1AAD19; background-color: #FFFFFF;">
					<option>12秒</option>
				</select>
			</div>
		</view>
		<view class="overall">
			<span class="left_1">声音播放</span>
			<div class="right">
				<span class="weui-switch" :class="{'weui-switch-on' : isChecked2}" :value="value" @click="toggle2">
					<div v-if="isChecked2 && direction.length > 0">
						{{direction[0]}}
					</div>
					<div v-if="!isChecked2 && direction.length > 0">
						{{direction[1]}}
					</div>
				</span>
			</div>
		</view>
		<view class="overall">
			<span class="left_2">播报铃声</span>
			<div class="right">
				<select style="border: 0px; font-size: 18px; color: #1AAD19; background-color: #FFFFFF;">
					<option>平台铃声1</option>
				</select>
			</div>
		</view>
		<view class="overall">
			<span class="left_1">消息通知</span>
			<div class="right">
				<span class="weui-switch" :class="{'weui-switch-on' : isChecked3}" :value="value" @click="toggle3">
					<div v-if="isChecked3 && direction.length > 0">
						{{direction[0]}}
					</div>
					<div v-if="!isChecked3 && direction.length > 0">
						{{direction[1]}}
					</div>
				</span>
			</div>
		</view>
		<view class="overall">
			<span class="left_1">任务视图</span>
			<div class="right">
				<select style="border: 0px; font-size: 18px; color: #1AAD19; background-color: #FFFFFF;">
					<option>图标</option>
				</select>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'switchComponent',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				isChecked1: this.value,
				isChecked2: this.value,
				isChecked3: this.value
			}
		},
		computed: {
			direction() {
				if (this.text) {
					return this.text.split('|')
				} else {
					return []
				}
			}
		},
		watch: {
			// value (val) {
			//  this.isChecked3 = val
			// },
			// isChecked1(val) {
			// 	this.$emit('change', val);
			// },
			// isChecked2(val) {
			// 	this.$emit('change', val);
			// },
			// isChecked3(val) {
			// 	this.$emit('change', val);
			// }

		},
		methods: {
			toggle1() {
				this.isChecked1 = !this.isChecked1;
			},
			toggle2() {
				this.isChecked2 = !this.isChecked2;
			},
			toggle3() {
				console.log(this.isChecked3)
				this.isChecked3 = !this.isChecked3;
			}
		}
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
	.overall {
		width: 100%;
		height: 45.5px;
		font-size: 18px;
		background-color: #FFFFFF;
		padding-top: 3%;
		border-bottom: 1px #ccc solid;
	}

	.left_1 {
		margin-left: 3%;
	}

	.left_2 {
		margin-left: 7%;
	}

	.right {
		float: right;
		margin-right: 5%;
	}

	.weui-switch {
		display: block;
		position: relative;
		width: 52px;
		height: 24px;
		border: 1px solid #DFDFDF;
		outline: 0;
		border-radius: 16px;
		box-sizing: border-box;
		background-color: #DFDFDF;
		transition: background-color 0.1s, border 0.1s;
		cursor: pointer;
	}

	.weui-switch:before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		height: 22px;
		border-radius: 15px;
		background-color: #FDFDFD;
		transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
	}

	.weui-switch:after {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 22px;
		height: 22px;
		border-radius: 15px;
		background-color: #FFFFFF;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
		transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
	}

	.weui-switch-on {
		border-color: #6F6F6F;
		background-color: #1AAD19;
	}

	.weui-switch-on:before {
		border-color: #1AAD19;
		background-color: rgb(247,149,184);
	}

	.weui-switch-on:after {
		transform: translateX(28px);
	}
</style>
